<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx 反向代理与负载均衡：请求头与请求体处理完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        .content-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }
        
        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
        }
        
        .code-block::before {
            content: 'nginx';
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 12px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }
        
        .feature-icon:hover {
            transform: rotate(10deg) scale(1.1);
        }
        
        .highlight-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 600;
        }
        
        .mermaid {
            margin: 2rem 0;
            text-align: center;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-6 relative">
        <div class="max-w-6xl mx-auto relative z-10">
            <div class="text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight">
                    Nginx 反向代理与负载均衡
                </h1>
                <p class="text-2xl md:text-3xl mb-8 opacity-90">
                    请求头与请求体处理完全指南
                </p>
                <div class="max-w-3xl mx-auto">
                    <p class="text-lg leading-relaxed opacity-80">
                        深入探索 Nginx 在反向代理和负载均衡场景下的请求处理机制，掌握请求头转发、自定义配置、请求体限制等核心技术，构建高性能、高可用的 Web 服务架构。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-6 py-12">
        <!-- Introduction Card -->
        <div class="content-card rounded-2xl p-8 mb-12">
            <div class="flex items-start space-x-4">
                <div class="feature-icon floating">
                    <i class="fas fa-server"></i>
                </div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-4 text-gray-800">核心概述</h2>
                    <p class="text-lg text-gray-600 leading-relaxed">
                        在 Nginx 中处理反向代理和负载均衡的请求头和请求体涉及配置请求头的转发、自定义请求头的设置、请求体大小限制等。Nginx 能够处理这些操作，以确保请求能够正确地传递到后端服务器并得到合适的响应。通过配置 <code class="bg-purple-100 text-purple-800 px-2 py-1 rounded">proxy_set_header</code> 指令，设置请求头，调整请求体大小，以及处理 WebSocket 连接，可以满足各种应用场景的需求。
                    </p>
                </div>
            </div>
        </div>

        <!-- Architecture Diagram -->
        <div class="content-card rounded-2xl p-8 mb-12">
            <h2 class="section-title text-3xl font-bold text-gray-800">架构概览</h2>
            <div class="mermaid">
                graph LR
                    A[客户端] -->|HTTP请求| B[Nginx反向代理]
                    B -->|转发请求头| C[后端服务器1]
                    B -->|负载均衡| D[后端服务器2]
                    B -->|WebSocket| E[后端服务器3]
                    
                    style A fill:#f9f,stroke:#333,stroke-width:2px
                    style B fill:#667eea,stroke:#333,stroke-width:2px,color:#fff
                    style C fill:#9f9,stroke:#333,stroke-width:2px
                    style D fill:#9f9,stroke:#333,stroke-width:2px
                    style E fill:#9f9,stroke:#333,stroke-width:2px
            </div>
        </div>

        <!-- Request Headers Section -->
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <div class="content-card rounded-2xl p-8">
                <div class="feature-icon">
                    <i class="fas fa-exchange-alt"></i>
                </div>
                <h3 class="text-2xl font-bold mb-4 text-gray-800">请求头转发</h3>
                <p class="text-gray-600 mb-6">
                    Nginx 在反向代理和负载均衡时，可以使用 <span class="highlight-text">proxy_set_header</span> 指令来设置或修改传递给后端服务器的请求头。
                </p>
                <div class="code-block p-6 text-sm">
                    <pre><code>location / {
    proxy_pass http://backend;
    
    # 设置传递给后端服务器的请求头
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}</code></pre>
                </div>
            </div>

            <div class="content-card rounded-2xl p-8">
                <div class="feature-icon">
                    <i class="fas fa-cog"></i>
                </div>
                <h3 class="text-2xl font-bold mb-4 text-gray-800">请求头详解</h3>
                <div class="space-y-4">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-purple-600 mt-1"></i>
                        <div>
                            <h4 class="font-semibold text-gray-800">Host</h4>
                            <p class="text-gray-600">转发原始请求的主机名，确保后端应用可以识别请求的域名。</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-purple-600 mt-1"></i>
                        <div>
                            <h4 class="font-semibold text-gray-800">X-Real-IP</h4>
                            <p class="text-gray-600">客户端的真实 IP 地址，帮助后端应用获取客户端的原始 IP。</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-purple-600 mt-1"></i>
                        <div>
                            <h4 class="font-semibold text-gray-800">X-Forwarded-For</h4>
                            <p class="text-gray-600">客户端 IP 地址链，记录了请求经过的代理服务器的 IP 地址。</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-purple-600 mt-1"></i>
                        <div>
                            <h4 class="font-semibold text-gray-800">X-Forwarded-Proto</h4>
                            <p class="text-gray-600">请求使用的协议（HTTP 或 HTTPS），用于处理协议相关的逻辑。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Request Body Section -->
        <div class="content-card rounded-2xl p-8 mb-12">
            <h2 class="section-title text-3xl font-bold text-gray-800 mb-8">请求体处理</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">
                        <i class="fas fa-upload text-purple-600 mr-2"></i>
                        处理 POST 请求的请求体
                    </h3>
                    <p class="text-gray-600 mb-4">
                        Nginx 作为反向代理服务器，会将客户端请求的请求体转发给后端服务器。默认情况下，Nginx 不会对请求体进行处理或修改。
                    </p>
                    <div class="code-block p-4 text-sm">
                        <pre><code>location /api {
    proxy_pass http://backend;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}</code></pre>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">
                        <i class="fas fa-ruler text-purple-600 mr-2"></i>
                        配置请求体大小限制
                    </h3>
                    <p class="text-gray-600 mb-4">
                        通过 <span class="highlight-text">client_max_body_size</span> 指令设置请求体的最大大小，以防止过大的请求体导致问题。
                    </p>
                    <div class="code-block p-4 text-sm">
                        <pre><code>http {
    client_max_body_size 10m; # 限制请求体大小为10MB
    
    server {
        listen 80;
        server_name demo.com;
        
        location / {
            proxy_pass http://backend;
        }
    }
}</code></pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- Load Balancing Section -->
        <div class="content-card rounded-2xl p-8 mb-12">
            <div class="flex items-start space-x-4 mb-8">
                <div class="feature-icon">
                    <i class="fas fa-balance-scale"></i>
                </div>
                <div>
                    